import { DatePicker, Form, Input, Select } from 'antd';
import moment from 'moment';
import styles from './index.less';

const { RangePicker } = DatePicker;
const { Search } = Input;

interface SearchBoxProps {
  onSearch: (params: {
    status: string;
    range: [string | null, string | null];
    searchKey: string;
  }) => void;
}

const SearchBox: React.FC<SearchBoxProps> = ({ onSearch }) => {
  const [form] = Form.useForm();

  const options = [
    { value: '0', label: '全部' },
    { value: '1', label: '待办' },
    { value: '2', label: '已办' },
  ];

  const handleFinish = (values: any) => {
    const { status, range, searchKey } = values;
    onSearch({
      status: status || '0',
      range: range
        ? [range[0]?.format('YYYY-MM-DD'), range[1]?.format('YYYY-MM-DD')]
        : [null, null],
      searchKey: searchKey || '',
    });
  };

  const disableDate = (current: any) => {
    return current && current > moment().endOf('day');
  };

  return (
    <Form
      form={form}
      layout="inline"
      onFinish={handleFinish}
      className={styles.searchBox}
    >
      <div className={styles.range}>
        状态：
        <Form.Item name="status" initialValue="0" style={{ width: 200 }}>
          <Select options={options} />
        </Form.Item>
      </div>

      <div className={styles.range}>
        区间：
        <Form.Item name="range" style={{ width: 250 }}>
          <RangePicker disabledDate={disableDate} />
        </Form.Item>
      </div>

      <Form.Item name="searchKey" style={{ width: 250 }}>
        <Search
          onSearch={() => form.submit()}
          placeholder="请输入内容搜索"
          allowClear
          enterButton="筛选"
        />
      </Form.Item>
    </Form>
  );
};

export default SearchBox;
